<template>
  <view class="page">
    <!-- 状态栏占位 -->
    <view :style="{ height: statusBarHeight + 'px' }"></view>

    <!-- 导航栏 -->
    <view class="nav-bar">
      <view class="nav-left" @tap="goBack">
        <text class="fa fa-chevron-left fa-gray"></text>
      </view>
      <text class="nav-title">质控分析</text>
      <view class="nav-right" @tap="goToMessages">
        <text class="fa fa-bell-o search-icon fa-gray"></text>
      </view>
    </view>

    <!-- 内容区域 -->
    <scroll-view scroll-y class="content">
      <!-- 时间筛选 -->
      <view class="filter-section">
        <view class="filter-buttons">
          <view
            v-for="(filter, index) in filters"
            :key="index"
            :class="[
              'filter-btn',
              currentFilter === index ? 'filter-btn-active' : '',
            ]"
            @tap="switchFilter(index)"
          >
            <text>{{ filter }}</text>
          </view>
        </view>
      </view>

      <!-- 质控总览 -->
      <view class="overview-section">
        <view class="overview-card">
          <view class="overview-header">
            <text class="overview-title">质控总览</text>
            <text class="overview-subtitle">2025年1月</text>
          </view>
          <view class="overview-main">
            <view class="main-stat">
              <text class="main-value">156</text>
              <text class="main-label">检查项目</text>
            </view>
            <view class="main-stat">
              <text class="main-value">89.2%</text>
              <text class="main-label">整体合格率</text>
            </view>
          </view>
          <view class="overview-stats">
            <view class="stat-mini">
              <text class="stat-num">42</text>
              <text class="stat-text">待整改</text>
            </view>
            <view class="stat-mini">
              <text class="stat-num">28</text>
              <text class="stat-text">整改中</text>
            </view>
            <view class="stat-mini">
              <text class="stat-num">86</text>
              <text class="stat-text">已完成</text>
            </view>
            <view class="stat-mini">
              <text class="stat-num">15</text>
              <text class="stat-text">追踪中</text>
            </view>
          </view>
        </view>
      </view>

      <!-- 质量趋势分析 -->
      <view class="trend-section">
        <view class="section-card">
          <view class="section-header">
            <text class="section-title">质量趋势分析</text>
            <text class="section-subtitle">最近6个月</text>
          </view>

          <!-- ECharts图表容器 -->
          <view class="chart-wrapper">
            <echarts
              ref="qualityChart"
              :option="chartOption"
              canvasId="qualityChart"
              style="width: 100%; height: 300px"
            >
            </echarts>
          </view>
        </view>
      </view>

      <!-- 科室质量排名 -->
      <view class="ranking-section">
        <view class="section-card">
          <view class="section-header">
            <text class="section-title">科室质量排名</text>
            <text class="section-subtitle">本月Top10</text>
          </view>
          <view class="ranking-list">
            <view class="ranking-item">
              <view class="ranking-left">
                <view class="rank-badge rank-gold">
                  <text>1</text>
                </view>
                <text class="dept-name">急诊科</text>
              </view>
              <view class="ranking-right">
                <view class="progress-mini">
                  <view class="progress-mini-fill" style="width: 96%"></view>
                </view>
                <text class="score-text score-green">96%</text>
              </view>
            </view>
            <view class="ranking-item">
              <view class="ranking-left">
                <view class="rank-badge rank-silver">
                  <text>2</text>
                </view>
                <text class="dept-name">ICU</text>
              </view>
              <view class="ranking-right">
                <view class="progress-mini">
                  <view
                    class="progress-mini-fill progress-green"
                    style="width: 94%"
                  ></view>
                </view>
                <text class="score-text score-green">94%</text>
              </view>
            </view>
            <view class="ranking-item">
              <view class="ranking-left">
                <view class="rank-badge rank-bronze">
                  <text>3</text>
                </view>
                <text class="dept-name">外科</text>
              </view>
              <view class="ranking-right">
                <view class="progress-mini">
                  <view
                    class="progress-mini-fill progress-blue"
                    style="width: 92%"
                  ></view>
                </view>
                <text class="score-text score-green">92%</text>
              </view>
            </view>
            <view class="ranking-item">
              <view class="ranking-left">
                <view class="rank-badge rank-normal">
                  <text>4</text>
                </view>
                <text class="dept-name">内科</text>
              </view>
              <view class="ranking-right">
                <view class="progress-mini">
                  <view
                    class="progress-mini-fill progress-teal"
                    style="width: 90%"
                  ></view>
                </view>
                <text class="score-text score-green">90%</text>
              </view>
            </view>
            <view class="ranking-item">
              <view class="ranking-left">
                <view class="rank-badge rank-normal">
                  <text>5</text>
                </view>
                <text class="dept-name">妇产科</text>
              </view>
              <view class="ranking-right">
                <view class="progress-mini">
                  <view
                    class="progress-mini-fill progress-purple"
                    style="width: 88%"
                  ></view>
                </view>
                <text class="score-text score-yellow">88%</text>
              </view>
            </view>
          </view>
        </view>
      </view>

      <!-- 问题类型分析 -->
      <view class="problem-section">
        <view class="section-card">
          <view class="section-header">
            <text class="section-title">问题类型分析</text>
            <text class="section-subtitle">本月统计</text>
          </view>
          <view class="problem-list">
            <view class="problem-item">
              <view class="problem-left">
                <view class="dot dot-red"></view>
                <text class="problem-name">操作规范</text>
              </view>
              <view class="problem-right">
                <text class="problem-count">18个</text>
                <text class="problem-percent">42.9%</text>
              </view>
            </view>
            <view class="problem-item">
              <view class="problem-left">
                <view class="dot dot-yellow"></view>
                <text class="problem-name">设备管理</text>
              </view>
              <view class="problem-right">
                <text class="problem-count">12个</text>
                <text class="problem-percent">28.6%</text>
              </view>
            </view>
            <view class="problem-item">
              <view class="problem-left">
                <view class="dot dot-blue"></view>
                <text class="problem-name">流程管理</text>
              </view>
              <view class="problem-right">
                <text class="problem-count">8个</text>
                <text class="problem-percent">19.0%</text>
              </view>
            </view>
            <view class="problem-item">
              <view class="problem-left">
                <view class="dot dot-green"></view>
                <text class="problem-name">护理质量</text>
              </view>
              <view class="problem-right">
                <text class="problem-count">4个</text>
                <text class="problem-percent">9.5%</text>
              </view>
            </view>
          </view>
        </view>
      </view>

      <!-- 风险等级分布 -->
      <view class="risk-section">
        <view class="section-card">
          <view class="section-header">
            <text class="section-title">风险等级分布</text>
            <text class="section-subtitle">当前状态</text>
          </view>
          <view class="risk-grid">
            <view class="risk-item risk-high">
              <text class="risk-value">8</text>
              <text class="risk-label">高风险</text>
              <text class="risk-desc">需立即处理</text>
            </view>
            <view class="risk-item risk-medium">
              <text class="risk-value">15</text>
              <text class="risk-label">中风险</text>
              <text class="risk-desc">重点关注</text>
            </view>
            <view class="risk-item risk-low">
              <text class="risk-value">19</text>
              <text class="risk-label">低风险</text>
              <text class="risk-desc">常规处理</text>
            </view>
          </view>
        </view>
      </view>

      <!-- PDCA循环效果 -->
      <view class="pdca-section">
        <view class="section-card">
          <view class="section-header">
            <text class="section-title">PDCA循环效果</text>
            <text class="section-subtitle">本月数据</text>
          </view>
          <view class="pdca-grid">
            <view class="pdca-item pdca-blue">
              <text class="pdca-letter">P</text>
              <text class="pdca-name">计划</text>
              <text class="pdca-count">42项</text>
            </view>
            <view class="pdca-item pdca-yellow">
              <text class="pdca-letter">D</text>
              <text class="pdca-name">执行</text>
              <text class="pdca-count">38项</text>
            </view>
            <view class="pdca-item pdca-purple">
              <text class="pdca-letter">C</text>
              <text class="pdca-name">检查</text>
              <text class="pdca-count">35项</text>
            </view>
            <view class="pdca-item pdca-green">
              <text class="pdca-letter">A</text>
              <text class="pdca-name">改进</text>
              <text class="pdca-count">32项</text>
            </view>
          </view>
          <view class="pdca-result">
            <text class="result-value">76.2%</text>
            <text class="result-label">PDCA完整度</text>
          </view>
        </view>
      </view>

      <!-- 关键指标 -->
      <view class="indicators-section" style="margin-bottom: 32rpx">
        <view class="section-card">
          <view class="section-header">
            <text class="section-title">关键指标</text>
            <text class="section-subtitle">月度对比</text>
          </view>
          <view class="indicators-list">
            <view class="indicator-row">
              <text class="indicator-name">平均整改时间</text>
              <view class="indicator-value-group">
                <text class="indicator-value">5.2天</text>
                <text class="indicator-change indicator-down">↓1.3天</text>
              </view>
            </view>
            <view class="indicator-row">
              <text class="indicator-name">首次通过率</text>
              <view class="indicator-value-group">
                <text class="indicator-value">78.5%</text>
                <text class="indicator-change indicator-up">↑5.2%</text>
              </view>
            </view>
            <view class="indicator-row">
              <text class="indicator-name">重复问题率</text>
              <view class="indicator-value-group">
                <text class="indicator-value">12.3%</text>
                <text class="indicator-change indicator-bad">↑2.1%</text>
              </view>
            </view>
            <view class="indicator-row">
              <text class="indicator-name">追踪有效性</text>
              <view class="indicator-value-group">
                <text class="indicator-value">88.0%</text>
                <text class="indicator-change indicator-up">↑3.5%</text>
              </view>
            </view>
          </view>
        </view>
      </view>
    </scroll-view>
  </view>
</template>

<script>
import echarts from "@/components/echarts-uniapp/echarts-uniapp.vue";

export default {
  components: {
    echarts,
  },
  data() {
    return {
      statusBarHeight: 0,
      currentFilter: 0,
      filters: ["本月", "本季度", "本年度"],
      currentPoint: -1,
      chartData: {
        data: [
          { month: "8月", qualityRate: 85, checkCount: 45 },
          { month: "9月", qualityRate: 87, checkCount: 52 },
          { month: "10月", qualityRate: 78, checkCount: 48 },
          { month: "11月", qualityRate: 91, checkCount: 58 },
          { month: "12月", qualityRate: 89, checkCount: 56 },
          { month: "1月", qualityRate: 92, checkCount: 62 },
        ],
        maxCheck: 70,
      },
      chartOption: {},
    };
  },
  onLoad() {
    this.statusBarHeight = uni.getSystemInfoSync().statusBarHeight || 0;
  },
  mounted() {
    // 初始化ECharts图表
    this.$nextTick(() => {
      this.initECharts();
    });
  },
  methods: {
    // 初始化ECharts图表
    initECharts() {
      // 准备图表数据
      const months = this.chartData.data.map((item) => item.month);
      const qualityRates = this.chartData.data.map((item) => item.qualityRate);
      const checkCounts = this.chartData.data.map((item) => item.checkCount);

      // 设置图表选项
      this.chartOption = {
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "shadow",
          },
        },
        grid: {
          top: "5%", // 调整图表上边距，使图表往上移动
          left: "0%",
          right: "0%",
          bottom: "25%",
          containLabel: true,
        },
        xAxis: [
          {
            type: "category",
            data: months,
            axisTick: {
              show: false, // 移除标尺线
            },
            axisLine: {
              show: false, // 移除轴线
            },
            axisLabel: {
              margin: 20, // 增加横坐标距离下边的间距
            },
            axisPointer: {
              type: "shadow",
            },
          },
        ],
        yAxis: [
          {
            type: "value",
            min: 0,
            max: this.chartData.maxCheck,
            interval: Math.floor(this.chartData.maxCheck / 5),
            axisLine: {
              show: false, // 移除Y轴轴线
            },
            axisTick: {
              show: false, // 移除Y轴标尺线
            },
            axisLabel: {
              formatter: "{value}",
            },
            splitLine: {
              show: true, // 保留网格线
              lineStyle: {
                type: "dashed", // 设置网格线为虚线
              },
            },
          },
        ],
        series: [
          {
            name: "检查数量",
            type: "bar",
            data: checkCounts,
            label: {
              show: true,
              position: "insideBottom",
              color: "#ffffff",
              fontSize: 12,
              fontWeight: "bold",
              offset: [0, -5],
            },
            itemStyle: {
              borderRadius: [4, 4, 0, 0], // 上部两个角为圆角
              color: function (params) {
                // 定义颜色列表
                const colors = [
                  { start: "#5eead4", end: "#2dd4bf" },
                  { start: "#2dd4bf", end: "#14b8a6" },
                  { start: "#fca5a5", end: "#f87171" },
                  { start: "#4ade80", end: "#22c55e" },
                  { start: "#2dd4bf", end: "#14b8a6" },
                  { start: "#4ade80", end: "#22c55e" },
                ];

                // 根据索引选择颜色
                const color = colors[params.dataIndex % colors.length];

                // 返回渐变色
                return {
                  type: "linear",
                  x: 0,
                  y: 0,
                  x2: 0,
                  y2: 1,
                  colorStops: [
                    { offset: 0, color: color.start },
                    { offset: 1, color: color.end },
                  ],
                };
              },
            },
          },
        ],
      };
    },

    // 显示数据点详情
    showDetail(index) {
      this.currentPoint = this.currentPoint === index ? -1 : index;
    },

    // 计算折线段样式
    getLineStyle(index) {
      const current = this.chartData.data[index];
      const next = this.chartData.data[index + 1];

      const y1 = current.qualityRate;
      const y2 = next.qualityRate;
      const height = Math.abs(y2 - y1);
      const angle = (Math.atan2(y2 - y1, 100) * 180) / Math.PI;

      return {
        height: height + "%",
        bottom: Math.min(y1, y2) + "%",
        transform: `rotate(${angle}deg)`,
        transformOrigin: "left bottom",
      };
    },

    goBack() {
      uni.navigateBack();
    },

    goToMessages() {
      uni.navigateTo({
        url: "/pages/message/message",
      });
    },

    switchFilter(index) {
      this.currentFilter = index;
      this.currentPoint = -1;
      this.updateChartData(index);
    },

    updateChartData(filterIndex) {
      const dataMap = {
        0: {
          // 本月
          data: [
            { month: "8月", qualityRate: 85, checkCount: 45 },
            { month: "9月", qualityRate: 87, checkCount: 52 },
            { month: "10月", qualityRate: 78, checkCount: 48 },
            { month: "11月", qualityRate: 91, checkCount: 58 },
            { month: "12月", qualityRate: 89, checkCount: 56 },
            { month: "1月", qualityRate: 92, checkCount: 62 },
          ],
          maxCheck: 20,
        },
        1: {
          // 本季度
          data: [
            { month: "10月", qualityRate: 86, checkCount: 48 },
            { month: "11月", qualityRate: 89, checkCount: 56 },
            { month: "12月", qualityRate: 92, checkCount: 62 },
          ],
          maxCheck: 70,
        },
        2: {
          // 本年度
          data: [
            { month: "1月", qualityRate: 82, checkCount: 45 },
            { month: "2月", qualityRate: 84, checkCount: 48 },
            { month: "3月", qualityRate: 86, checkCount: 50 },
            { month: "4月", qualityRate: 85, checkCount: 47 },
            { month: "5月", qualityRate: 87, checkCount: 52 },
            { month: "6月", qualityRate: 88, checkCount: 54 },
            { month: "7月", qualityRate: 86, checkCount: 51 },
            { month: "8月", qualityRate: 85, checkCount: 48 },
            { month: "9月", qualityRate: 87, checkCount: 52 },
            { month: "10月", qualityRate: 91, checkCount: 58 },
            { month: "11月", qualityRate: 89, checkCount: 56 },
            { month: "12月", qualityRate: 92, checkCount: 62 },
          ],
          maxCheck: 70,
        },
      };

      this.chartData = dataMap[filterIndex];

      // 重新初始化ECharts图表
      this.$nextTick(() => {
        this.initECharts();
      });
    },

    goToHome() {
      uni.navigateTo({
        url: "/pages/index/index",
      });
    },

    goToProfile() {
      uni.navigateTo({
        url: "/pages/mine/mine",
      });
    },
  },
};
</script>

<style scoped>
.page {
  min-height: 100vh;
  background: linear-gradient(to bottom right, #f9fafb, #eff6ff);
  display: flex;
  flex-direction: column;
}

.nav-bar {
  height: 88rpx;
  background: #fff;
  border-bottom: 1rpx solid #f0f0f0;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

.nav-left {
  position: absolute;
  left: 32rpx;
  font-size: 40rpx;
  color: #6b7280;
}

.nav-title {
  font-size: 34rpx;
  font-weight: 600;
  color: #111827;
}

.nav-right {
  position: absolute;
  right: 32rpx;
  font-size: 36rpx;
  color: #6b7280;
}

.content {
  flex: 1;
}

.filter-section {
  padding: 24rpx 32rpx;
}

.filter-buttons {
  display: flex;
  gap: 16rpx;
}

.filter-btn {
  flex: 1;
  padding: 16rpx 24rpx;
  background: #e5e7eb;
  border-radius: 24rpx;
  text-align: center;
  font-size: 28rpx;
  color: #4b5563;
  font-weight: 500;
}

.filter-btn-active {
  background: #fff;
  color: #14b8a6;
  border: 2rpx solid #99f6e4;
}

.overview-section {
  padding: 0 32rpx;
}

.overview-card {
  background: linear-gradient(to right, #14b8a6, #06b6d4);
  border-radius: 32rpx;
  padding: 32rpx;
  color: #fff;
}

.overview-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 24rpx;
}

.overview-title {
  font-size: 32rpx;
  font-weight: 600;
}

.overview-subtitle {
  font-size: 24rpx;
  opacity: 0.9;
}

.overview-main {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 32rpx;
  text-align: center;
  margin-bottom: 24rpx;
}

.main-stat {
  display: flex;
  flex-direction: column;
  gap: 8rpx;
}

.main-value {
  font-size: 48rpx;
  font-weight: bold;
}

.main-label {
  font-size: 24rpx;
  opacity: 0.9;
}

.overview-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24rpx;
  text-align: center;
}

.stat-mini {
  display: flex;
  flex-direction: column;
  gap: 4rpx;
}

.stat-num {
  font-size: 28rpx;
  font-weight: bold;
}

.stat-text {
  font-size: 20rpx;
  opacity: 0.9;
}

.trend-section,
.ranking-section,
.problem-section,
.risk-section,
.pdca-section,
.indicators-section {
  padding: 24rpx 32rpx 0;
}

.section-card {
  background: #fff;
  border-radius: 32rpx;
  padding: 32rpx;
  box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.05);
  border: 1rpx solid #f3f4f6;
}

.section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 24rpx;
}

.section-title {
  font-size: 32rpx;
  font-weight: 600;
  color: #111827;
}

.section-subtitle {
  font-size: 24rpx;
  color: #6b7280;
}

/* 图表图例 */
.chart-legend {
  display: flex;
  justify-content: center;
  gap: 48rpx;
  margin-top: 16rpx;
  margin-bottom: 24rpx;
}

.legend-item {
  display: flex;
  align-items: center;
  gap: 8rpx;
}

.legend-dot {
  width: 24rpx;
  height: 24rpx;
  border-radius: 50%;
}

.legend-dot-line {
  background: linear-gradient(135deg, #14b8a6, #06b6d4);
}

.legend-dot-bar {
  background: linear-gradient(135deg, #93c5fd, #3b82f6);
}

.legend-text {
  font-size: 24rpx;
  color: #6b7280;
}

/* 图表容器 */
.chart-wrapper {
  display: flex;
  gap: 16rpx;
  height: 420rpx;
  margin-top: 16rpx;
}

.y-axis-left,
.y-axis-right {
  width: 60rpx;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 24rpx 0;
}

.y-axis-left {
  align-items: flex-end;
  padding-right: 8rpx;
}

.y-axis-right {
  align-items: flex-start;
  padding-left: 8rpx;
}

.y-label {
  font-size: 20rpx;
  color: #9ca3af;
  line-height: 1;
}

/* 图表主体 */
.chart-main {
  flex: 1;
  position: relative;
  background: #f9fafb;
  border-radius: 16rpx;
  padding: 24rpx 16rpx;
}

/* 网格线 */
.grid-lines {
  position: absolute;
  left: 16rpx;
  right: 16rpx;
  top: 24rpx;
  bottom: 56rpx;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  pointer-events: none;
}

.grid-line {
  height: 1rpx;
  background: #e5e7eb;
}

/* 目标线 */
.target-line {
  position: absolute;
  left: 16rpx;
  right: 16rpx;
  height: 2rpx;
  display: flex;
  align-items: center;
  pointer-events: none;
  z-index: 1;
}

.target-line-dash {
  flex: 1;
  height: 2rpx;
  background-image: linear-gradient(
    to right,
    #ef4444 0%,
    #ef4444 50%,
    transparent 50%
  );
  background-size: 16rpx 2rpx;
  background-repeat: repeat-x;
}

.target-label {
  position: absolute;
  right: 0;
  top: -24rpx;
  font-size: 20rpx;
  color: #ef4444;
  background: #f9fafb;
  padding: 0 8rpx;
}

/* 数据容器 */
.data-container {
  position: relative;
  height: 100%;
  display: flex;
  gap: 8rpx;
  padding-top: 24rpx;
}

.data-item {
  flex: 1;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* 柱状图 */
.bar-wrapper {
  position: absolute;
  bottom: 40rpx;
  left: 0;
  right: 0;
  height: calc(100% - 64rpx);
  display: flex;
  align-items: flex-end;
  justify-content: center;
}

.bar-column {
  width: 70%;
  background: linear-gradient(to top, #3b82f6, #93c5fd);
  border-radius: 8rpx 8rpx 0 0;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding-top: 8rpx;
  min-height: 32rpx;
  box-shadow: 0 -2rpx 8rpx rgba(59, 130, 246, 0.2);
  transition: all 0.3s ease;
}

.bar-label {
  font-size: 20rpx;
  color: #fff;
  font-weight: 600;
}

/* 折线图点 */
.line-point {
  position: absolute;
  left: 50%;
  width: 24rpx;
  height: 24rpx;
  margin-left: -12rpx;
  margin-bottom: -12rpx;
  z-index: 3;
  transition: all 0.3s ease;
}

.point-inner {
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, #14b8a6, #06b6d4);
  border-radius: 50%;
  border: 4rpx solid #fff;
  box-shadow: 0 2rpx 8rpx rgba(20, 184, 166, 0.4);
  transition: all 0.3s ease;
}

.point-active .point-inner {
  width: 32rpx;
  height: 32rpx;
  margin: -4rpx;
  box-shadow: 0 4rpx 16rpx rgba(20, 184, 166, 0.6);
}

/* 提示框 */
.point-tooltip {
  position: absolute;
  top: -48rpx;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(0, 0, 0, 0.85);
  padding: 8rpx 16rpx;
  border-radius: 8rpx;
  white-space: nowrap;
  box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.15);
  animation: tooltip-fade-in 0.3s ease;
}

.point-tooltip::after {
  content: "";
  position: absolute;
  bottom: -8rpx;
  left: 50%;
  margin-left: -8rpx;
  border: 8rpx solid transparent;
  border-top-color: rgba(0, 0, 0, 0.85);
}

.tooltip-text {
  font-size: 22rpx;
  color: #fff;
  font-weight: 600;
}

@keyframes tooltip-fade-in {
  from {
    opacity: 0;
    transform: translateX(-50%) translateY(-8rpx);
  }
  to {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
  }
}

/* 连接线 */
.line-segment {
  position: absolute;
  left: 50%;
  width: 100%;
  min-height: 4rpx;
  background: linear-gradient(to right, #14b8a6, #06b6d4);
  transform-origin: left bottom;
  z-index: 2;
  pointer-events: none;
  opacity: 0.8;
}

/* X轴标签 */
.x-label {
  position: absolute;
  bottom: 8rpx;
  left: 50%;
  transform: translateX(-50%);
  font-size: 22rpx;
  color: #6b7280;
  white-space: nowrap;
}

.ranking-list {
  display: flex;
  flex-direction: column;
  gap: 24rpx;
}

.ranking-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.ranking-left {
  display: flex;
  align-items: center;
  gap: 24rpx;
}

.rank-badge {
  width: 48rpx;
  height: 48rpx;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24rpx;
  font-weight: bold;
  color: #fff;
}

.rank-gold {
  background: #eab308;
}

.rank-silver {
  background: #9ca3af;
}

.rank-bronze {
  background: #f97316;
}

.rank-normal {
  background: #3b82f6;
}

.dept-name {
  font-size: 28rpx;
  color: #374151;
}

.ranking-right {
  display: flex;
  align-items: center;
  gap: 16rpx;
}

.progress-mini {
  width: 160rpx;
  height: 16rpx;
  background: #e5e7eb;
  border-radius: 999rpx;
  overflow: hidden;
}

.progress-mini-fill {
  height: 100%;
  background: linear-gradient(to right, #eab308, #f97316);
  border-radius: 999rpx;
}

.progress-green {
  background: linear-gradient(to right, #22c55e, #10b981);
}

.progress-blue {
  background: linear-gradient(to right, #3b82f6, #6366f1);
}

.progress-teal {
  background: linear-gradient(to right, #14b8a6, #06b6d4);
}

.progress-purple {
  background: linear-gradient(to right, #a855f7, #ec4899);
}

.score-text {
  font-size: 28rpx;
  font-weight: 500;
  min-width: 80rpx;
  text-align: right;
}

.score-green {
  color: #16a34a;
}

.score-yellow {
  color: #ca8a04;
}

.problem-list {
  display: flex;
  flex-direction: column;
  gap: 12rpx;
}

.problem-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.problem-left {
  display: flex;
  align-items: center;
  gap: 16rpx;
}

.dot {
  width: 24rpx;
  height: 24rpx;
  border-radius: 50%;
}

.dot-red {
  background: #ef4444;
}

.dot-yellow {
  background: #eab308;
}

.dot-blue {
  background: #3b82f6;
}

.dot-green {
  background: #22c55e;
}

.problem-name {
  font-size: 28rpx;
  color: #374151;
}

.problem-right {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 4rpx;
}

.problem-count {
  font-size: 28rpx;
  font-weight: 500;
  color: #111827;
}

.problem-percent {
  font-size: 24rpx;
  color: #6b7280;
}

.risk-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24rpx;
}

.risk-item {
  border-radius: 24rpx;
  padding: 24rpx;
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: 8rpx;
  border: 1rpx solid;
}

.risk-high {
  background: #fee2e2;
  border-color: #fca5a5;
}

.risk-medium {
  background: #fef3c7;
  border-color: #fde68a;
}

.risk-low {
  background: #dcfce7;
  border-color: #bbf7d0;
}

.risk-value {
  font-size: 40rpx;
  font-weight: bold;
}

.risk-high .risk-value {
  color: #dc2626;
}

.risk-medium .risk-value {
  color: #ca8a04;
}

.risk-low .risk-value {
  color: #16a34a;
}

.risk-label {
  font-size: 24rpx;
  color: #4b5563;
  margin-top: 8rpx;
}

.risk-desc {
  font-size: 20rpx;
  margin-top: 8rpx;
}

.risk-high .risk-desc {
  color: #dc2626;
}

.risk-medium .risk-desc {
  color: #ca8a04;
}

.risk-low .risk-desc {
  color: #16a34a;
}

.pdca-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24rpx;
  text-align: center;
}

.pdca-item {
  border-radius: 16rpx;
  padding: 24rpx;
  display: flex;
  flex-direction: column;
  gap: 8rpx;
}

.pdca-blue {
  background: #dbeafe;
}

.pdca-yellow {
  background: #fef3c7;
}

.pdca-purple {
  background: #f3e8ff;
}

.pdca-green {
  background: #dcfce7;
}

.pdca-letter {
  font-size: 36rpx;
  font-weight: bold;
}

.pdca-blue .pdca-letter {
  color: #2563eb;
}

.pdca-yellow .pdca-letter {
  color: #ca8a04;
}

.pdca-purple .pdca-letter {
  color: #9333ea;
}

.pdca-green .pdca-letter {
  color: #16a34a;
}

.pdca-name {
  font-size: 24rpx;
  color: #4b5563;
  margin-top: 8rpx;
}

.pdca-count {
  font-size: 28rpx;
  font-weight: 500;
}

.pdca-blue .pdca-count {
  color: #2563eb;
}

.pdca-yellow .pdca-count {
  color: #ca8a04;
}

.pdca-purple .pdca-count {
  color: #9333ea;
}

.pdca-green .pdca-count {
  color: #16a34a;
}

.pdca-result {
  margin-top: 24rpx;
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: 8rpx;
}

.result-value {
  font-size: 36rpx;
  font-weight: bold;
  color: #16a34a;
}

.result-label {
  font-size: 24rpx;
  color: #6b7280;
}

.indicators-list {
  display: flex;
  flex-direction: column;
  gap: 24rpx;
}

.indicator-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.indicator-name {
  font-size: 28rpx;
  color: #374151;
}

.indicator-value-group {
  display: flex;
  align-items: center;
  gap: 16rpx;
}

.indicator-value {
  font-size: 28rpx;
  font-weight: 500;
  color: #111827;
}

.indicator-change {
  font-size: 24rpx;
}

.indicator-down,
.indicator-up {
  color: #16a34a;
}

.indicator-bad {
  color: #dc2626;
}
</style>

